<template>
  <div>
    <el-container>
      <el-aside :width="isCollapse?'64px':'200px'">
        <div :class="isCollapse?'menuBox1': 'menuBox'">
          <el-menu
          :collapse="isCollapse"
            class="el-menu-vertical-demo"
            background-color="rgba(0, 164, 104, 1)"
            text-color="#fff"
            router
            active-text-color="#ffd04b"
          >
         
            <el-submenu 
                v-for="(item, index) in meauList"
                :index="item.id+''"
                :key="item.id+''"
            >
              <template slot="title">
                <i  class="iconfont" :class="'icon-'+item.icon" ></i>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item 
                v-for="(item1,index1) in item.childList"
                :index="item1.component"
                :key="pid+''"
                >{{item1.name}}</el-menu-item>
               
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <i class="el-icon-s-fold" @click="isCollapse = true" v-show="!isCollapse"></i> 
          <i class="el-icon-s-unfold" @click="isCollapse = false" v-show="isCollapse"></i>
          <div class="right">{{realName}}</div>
        </el-header>
        <el-main>
          <!-- name是确定css的开头  -->
          <transition name="fade-transform" mode="out-in">
            <router-view></router-view>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import {getStore ,GetCookie} from "@/config/config";
export default {
  name: "home",
  data(){
    return{
      isCollapse:false,
         meauList:JSON.parse(getStore("getMenus")),
         realName:GetCookie("realName")
    }
  },
  created() {
    let _self = this;
    // 通过当前的路由对象的_self.$route来接收上一个页面传递过来参数
    // this.$route 如果上一个页面时明文的query传参 当前query接收
    // 如果上一个页面时非明文的params传参  当前params接收
    console.log(_self.$route);
  }
};
</script>
<style scoped>
.menuBox1 {
  position: fixed;
  width: 64px;
  height: 100%;
  background: rgba(0, 164, 104, 1);
  overflow: scroll;
}
.menuBox {
  position: fixed;
  width: 200px;
  height: 100%;
  background: rgba(0, 164, 104, 1);
  overflow: scroll;
}
.menuBox::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.menuBox1::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.el-menu {
  border-right: 0;
}
.right{
  float: right;
}
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all .5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all .5s;
}

.breadcrumb-leave-active {
  position: absolute;
}

</style>